<template>
  <!--练习统计-->
  <view class="practiceEveryDayStatistics flex flex-column">
    <Head :detail="detail" type="statistics"></Head>
    <view class="line" style="height: 10px"></view>
    <view class="table f_1 flex flex-column">
      <Table :table-data="tableData" @rowClick="rowClick" @scrolltolower="scrolltolower" class="f_1"></Table>
    </view>
  </view>
</template>

<script>
import { getPracticeCheckHeader, pageUpgPracticeStudentByDate } from "@/improve/services";
import Table from "@/improve/components/Table/Table.vue";
import Head from "../components/head/EveryDayHead.vue";
import { formatTime } from '@/utils/PrjUtils';

export default {
  name: "practiceEveryDayStatistics",
  components: { Head, Table },
  data() {
    return {
      upgPracticeUuid: "",
      date: '',
      detail: {},
      checkUuidList: [],
      tableData: {
        statisticsTitle: "练习统计",
        title: ["姓名", "得分", "用时"],
        list: [
          {
            name: "姓名1",
            num: 20,
            "date": "00:56:01",
          },
          {
            name: "姓名2",
            num: 20,
            "date": "50:10:01",
          }],
        props: [
          {
            key: 'nickName',
            width: '40%',
          },

          {
            key: 'score',
            width: '30%',
          },
          {
            key: 'answerTime',
            width: '30%',
          },
        ]
      },
      pageData: {
        pageNo: 1,
        pageSize: 10,
        pageTotal: 0
      }
    }
  },
  methods: {
    getDetails() {
      getPracticeCheckHeader({ upgPracticeUuid: this.upgPracticeUuid, date: this.date }).then(res => {
        this.detail = res;
      })
    },
    // 获取练习统计
    getDailyStatistics() {
      pageUpgPracticeStudentByDate({ upgPracticeUuid: this.upgPracticeUuid, date: this.date, pageNo: this.pageData.pageNo, pageSize: this.pageData.pageSize }).then(res => {
        const data = res.page.datas.map(item => {
          return {
            ...item,
            answerTime: item.answerTime <= 0 || !item.answerTime ? '00:00:00' : formatTime(item.answerTime),
          }
        })
        this.checkUuidList = res.checkUuidList
        this.tableData.list = this.pageData.pageNo === 1 ? [...data] : [...this.list, ...data]
        this.pageData.pageTotal = res.page.totalPage
      })
    },
    rowClick(item) {
      const checkIndex = this.checkUuidList.findIndex(uuid => uuid === item.checkUuid)
      uni.navigateTo({
        url: `/improve/publish/answerDetail/index?practiceType=1&checkUuid=${item.checkUuid}&upgPracticeUuid=${this.upgPracticeUuid}&checkIndex=${checkIndex}&date=${this.date}&studentId=${item.studentId}&joinUuid=${item.joinUuid}`,
      })
    },
    scrolltolower() {
      if (this.pageData.pageNo < this.pageData.pageTotal) {
        this.pageData.pageNo++;
      }
      this.getDailyStatistics()
      console.log(this.pageData.pageNo)
    }
  },
  onLoad(options) {
    this.upgPracticeUuid = options.upgPracticeUuid
    this.date = options.date
    this.getDetails()
    this.getDailyStatistics()
  }
}
</script>

<style scoped lang="scss">
.practiceEveryDayStatistics {
  height: 100vh;
  width: 100vw;
  // padding-bottom: calc(20px + env(safe-area-inset-bottom));
  box-sizing: border-box;

  .line {
    width: 100%;
    background-color: #F5F5F5;
  }

  .table {
    margin-top: 10px;
    background-color: #FFFFFF;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}
</style>